<!doctype html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>电商交易数据可视化</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico in the root directory -->


    <!-- All css here -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/css/slick.css">
    <link rel="stylesheet" href="../static/css/meanmenu.css">
    <link rel="stylesheet" href="../static/css/default.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/css/responsive.css">

    <style>
        .example-div {
            width: 1800px;
            height: 1000px;
            top: -60px;
            bottom: 0;
            right: 620px;
        {#background-color: #c51717;#}
        }

        .rightce {
            width: 1130px;
            height: 90px;
        }

    </style>

    <style>
        #provinceInput:invalid {
            box-shadow: 0 0 5px rgb(248, 2, 2); /* 设置发光效果 */
        }
    </style>




</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!--  ====== preloader=============================================  -->
<div id="preloader">
    <div id="loading">
        <div id="loading-center">
            <div id="loading-center-absolute">
                <div class="object" id="object_one"></div>
                <div class="object" id="object_two"></div>
                <div class="object" id="object_three"></div>
                <div class="object" id="object_four"></div>
                <div class="object" id="object_five"></div>
                <div class="object" id="object_six"></div>
                <div class="object" id="object_seven"></div>
                <div class="object" id="object_eight"></div>

            </div>
        </div>
    </div>
</div><!-- /preloader -->

<!--  ====== header-area-start=======================================  -->
<header>
    <div id="header-sticky" class="transparent-header header-area">
        <div class="header header5">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-xl-3 col-lg-2 col-md-3 col-sm-3 col-4">
                        <div class="logo d-inline-block">
                            <a href="/home"><h1 class="text-white wow fadeIn f-700 pb-15 transition-3" style="margin-left: -300px">电商交易数据可视化</h1></a>

                        </div>
                    </div><!-- /col -->
                    <div class="col-xl-8 col-lg-9 col-md-8 col-sm-8 col-8 d-flex justify-content-end" style="margin-right: -400px">
                        <div class="main-menu">
                            <nav id="mobile-menu">
                                <ul class="d-block">
                                    <li>
                                        <a class="active text-white" href="/home">首 页</a>
                                    </li>
                                    <li>
                                        <a class="text-white" href="/rata">男女比例</a>
                                    </li>
                                    <li>
                                        <a class="text-white" href="/action">消费行为</a>
                                    </li>
                                    <li>
                                        <a class="text-white" href="/age">年龄数据</a>
                                    </li>
                                    <li>
                                        <a class="text-white" href="/item">热门商品词云</a>
                                    </li>
                                    <li>
                                        <a class="text-white" href="/province">各省份消费数据</a>
                                    </li>
                                    <li>
                                        <a class="text-white" href="/recall">回头客预测</a>
                                    </li>
                                </ul>
                            </nav>
                        </div><!-- /main-menu -->

                    </div><!-- /col -->
                </div><!-- /row -->
            </div><!-- /container -->
        </div>
    </div><!-- /header-bottom -->
</header>
<!--  header-area-end  -->


<main>
    <!-- ====== team-area-start=========================================== -->
    <div id="recall" class="slider-area slider5-bg overly position-relative slider-height d-flex align-items-center justify-content-center position-relative over-hidden no-repeat bg-cover" data-background="../static/picture/yyy4.jpg">
        <div class="container">
            <div class="row ">
                <div class="col-xl-5  col-lg-12 offset-lg-0 col-md-10 offset-md-1 col-sm-12 col-12">
                    <div class="service-content mb-50">
                        <div class="title rightce text-center">
                            <span class="sub-heading d-block f-700 theme-color">predict</span>
                            <h3 class="f-700 mb-40 text-light">回头客预测</h3>
                            <a class="btn theme-bg mt-30 wow fadeInUp" data-wow-delay=".5s" data-wow-duration="1s" id="scrollButton">开始预测</a>


                        </div>
                    </div><!-- /service-content -->
                </div><!-- /col -->

            </div><!-- /row -->
        </div><!-- /container -->
    </div>
    <!-- team-area-end -->

    <div class="bg-one">
        <div class="container">
            <div class="row" style="margin-top: 520px">
                <div class="col-xl-10  col-lg-12 offset-lg-0 col-md-10 offset-md-1 col-sm-12 col-12" style="margin-left: 100px;margin-top: -600px">
                    <h3 class="tittle text-light text-center">Predict Now</h3>
                    <h1 class="fw-bold text-light text-center">请 选 择 选 项 </h1>
                    <div class="d-flex text-light" style="margin-left: 130px">
                        <form action="/recall" method="POST" id="formt">

                            <div class="d-flex rent-option ms-5 mt-5 text-center">
                                <select class="form-select me-3" aria-label="Default select example" name="action">
                                    <option selected="">行为</option>
                                    <option value="0">点击</option>
                                    <option value="1">添加购物车</option>
                                    <option value="2">购买</option>
                                    <option value="3">关注商品</option>
                                </select>
                                <select class="form-select" aria-label="Default select example" name="age">
                                    <option selected="">年龄</option>
                                    <option value="1"><18</option>
                                    <option value="2">18-24</option>
                                    <option value="3">25-29</option>
                                    <option value="4">30-34</option>
                                    <option value="5">35-39</option>
                                    <option value="6">40-49</option>
                                    <option value="7">>=50</option>

                                </select>
                                <select class="form-select" aria-label="Default select example" name="gender">
                                    <option selected="">性别</option>
                                    <option value="0">女</option>
                                    <option value="1">男</option>
                                </select>


                                <label for="provinceInput" style="margin-left: 30px;margin-top: 12px">省份:</label>
                                <input class="form-select" aria-label="Default select example" type="text" id="provinceInput" list="provinces" placeholder="省份" style="color: white;" name="province">

                                <datalist id="provinces">
                                    <option value="上海市">
                                    <option value="云南">
                                    <option value="内蒙古">
                                    <option value="北京市">
                                    <option value="南沙诸岛">
                                    <option value="台湾">
                                    <option value="吉林">
                                    <option value="四川">
                                    <option value="天津市">
                                    <option value="宁夏">
                                    <option value="安徽">
                                    <option value="山东">
                                    <option value="山西">
                                    <option value="广东">
                                    <option value="广西">
                                    <option value="新疆">
                                    <option value="江苏">
                                    <option value="江西">
                                    <option value="河北">
                                    <option value="河南">
                                    <option value="浙江">
                                    <option value="海南">
                                    <option value="湖北">
                                    <option value="湖南">

                                    <option value="澳门">
                                    <option value="甘肃">
                                    <option value="福建">
                                    <option value="西藏">
                                    <option value="贵州">
                                    <option value="辽宁">
                                    <option value="重庆市">
                                    <option value="陕西">
                                    <option value="青海">
                                    <option value="香港">
                                    <option value="黑龙江">

                                </datalist>


                            </div>
                            <div class="common pt-3" style="margin-top: 50px" >
                                <div  class="submit btn-2 wow fadeInUp" data-wow-delay="0.5s">
                                    <button id="start-p" class="submit" type="submit"><a>开始预测</a></button>

                        </div>
                    </div>

                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>


    <!--service area start-->
    <div class="hhh">
        <div class="row" style="margin-top: -500px">
            <div class="col-lg-12 text-center">
                <h1 class="fw-bold pb-5 text-light">-----预 测 - 结 果-----</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-5 wow fadeInUp" data-wow-delay="0.5s">
            <div class="service-card text-center" style="margin-left: -306px" id="re">
                    {% if canshu == 1 %}
                        <h1 class="text-light">96%的概率为</h1><br>
                        <h1 class="text-light2">回头客</h1>
                    {% else %}
                        <h1 class="text-light">96%的概率为</h1><br>
                        <h1 class="text-light2">非回头客</h1>
                    {% endif %}

            </div>
        </div>
    </div>



</main>



<!-- All js here -->
<script src="../static/js/modernizr-3.5.0.min.js"></script>
<script src="../static/js/jquery-1.12.4.min.js"></script>
<script src="../static/js/popper.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/one-page-nav-min.js"></script>
<script src="../static/js/slick.min.js"></script>
<script src="../static/js/wow.min.js"></script>
<script src="../static/js/plugins.js"></script>
<script src="../static/js/jquery.meanmenu.min.js"></script>
<script src="../static/js/main.js"></script>


<script>
    document.getElementById('scrollButton').addEventListener('click', function() {
        // 获取当前滚动位置
        var currentScrollPos = window.pageYOffset || document.documentElement.scrollTop;

        // 设置目标滚动位置为当前位置加上一个屏幕的高度
        var targetScrollPos = currentScrollPos + window.innerHeight;

        // 使用动画效果平滑滚动到目标位置
        window.scrollTo({
            top: targetScrollPos,
            behavior: 'smooth' // 添加平滑滚动效果
        });
    });


</script>
<script>
    const provinceInput = document.getElementById('provinceInput');
    provinceInput.addEventListener('input', function() {
        const input = this.value;
        const options = document.getElementById('provinces').options;
        const isValid = Array.from(options).some(option => option.value === input);
        if (isValid) {
            this.setCustomValidity('');
        } else {
            this.setCustomValidity('请输入有效的省份');

        }
    });
</script>
<script>
    document.getElementById('start-p').addEventListener('click', function(event) {
        event.preventDefault();
        // 获取当前滚动位置
        var currentScrollPos = window.pageYOffset || document.documentElement.scrollTop;

        // 设置目标滚动位置为当前位置加上一个屏幕的高度
        var targetScrollPos = currentScrollPos + window.innerHeight-100;

        // 使用动画效果平滑滚动到目标位置
        window.scrollTo({
            top: targetScrollPos,
            behavior: 'smooth' // 添加平滑滚动效果
        });
    });


</script>


<script>
    document.getElementById('start-p').addEventListener('click', function() {
        document.getElementById('formt').submit(function(e) {
            e.preventDefault();
        });
    });
</script>



</body>
</html>